<template>
  <page-container :showBack="false">
    <template #nav-left>
      <view class="nav-left">
        <image src="/static/logo.png" mode="aspectFit" class="logo-icon"></image>
        <text class="logo-text">金盈晟珠宝</text>
      </view>
    </template>
    <view class="home-container">
      <!-- 公告栏 -->
      <view class="announcement-bar">
        <view class="notice-content">
          <image src="/static/index/notice.png" mode="aspectFit" class="announcement-icon"></image>
          <text class="announcement-text">公司主营：贵金属旧料回收、兑换板料、旧金提纯、原料买卖、金条定制、价格优惠、争先乐购。</text>
        </view>
      </view>

      <!-- Banner轮播 -->
      <view class="banner-swiper">
        <swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="4000" :duration="800"
          indicator-color="rgba(255, 255, 255, 0.4)" indicator-active-color="#d4af37" circular="true"
          @change="onSwiperChange" @animationfinish="onAnimationFinish">
          <swiper-item v-for="(item, index) in bannerList" :key="index">
            <view class="swiper-item">
              <image :src="item.bannerUrl" mode="aspectFill" class="banner-image"  />
              <view class="banner-overlay">
                <view class="banner-content">
                  <text class="banner-title">{{ item.title }}</text>
                  <text class="banner-subtitle">{{ item.subtitle }}</text>
                  <view class="banner-button" v-if="item.buttonText" @click="handleBannerClick(item)">
                    <text class="button-text">{{ item.buttonText }}</text>
                  </view>
                </view>
              </view>
            </view>
          </swiper-item>
        </swiper>

        <!-- 自定义指示器 -->
        <view class="custom-indicator">
          <view v-for="(item, index) in bannerList" :key="index" class="indicator-dot"
            :class="{ active: currentSwiperIndex === index }" @click="goToSwiper(index)"></view>
        </view>
      </view>

      <!-- 状态和时间 -->
      <view class="status-section">
        <text class="business-status">{{ isBusinessStatus }}</text>
        <text class="datetime">{{ getCurrentTime() }}</text>
      </view>

      <!-- 价格表格 -->
      <view class="price-table">
        <view class="table-header">
          <text class="header-cell">品类</text>
          <text class="header-cell">回购</text>
          <text class="header-cell">销售</text>
          <text class="header-cell">高低</text>
        </view>

        <view class="table-row" v-for="(item, index) in marketData" :key="index">
          <text class="category-cell">{{ item.category }}</text>
          <view class="price-cell">
            <text class="arrow-up" v-if="item.lastSellUp">↑</text>
            <text class="arrow-down" v-if="!item.lastSellUp">↓</text>
            <text class="price" :class="{ 'price-up': item.lastSellUp, 'price-down': !item.lastSellUp }">{{
              item.buyback }}</text>
          </view>
          <view class="price-cell">
            <text class="arrow-up" v-if="item.lastUp">↑</text>
            <text class="arrow-down" v-if="!item.lastUp">↓</text>
            <text class="price" :class="{ 'price-up': item.lastUp, 'price-down': !item.lastUp }">{{ item.sales }}</text>
          </view>
          <view class="high-low-cell">
            <view class="high">{{ item.high }}</view>
            <view class="low">{{ item.low }}</view>
          </view>
        </view>
      </view>

      <!-- 温馨提示 -->
      <view class="disclaimer">
        <text class="disclaimer-text">温馨提示：产品纯度机测没有达到以上成色的检测结果另行报价，以上每克的报价仅供参考</text>
      </view>
    </view>
  </page-container>
</template>

<script>
export default {
  name: 'HomePage',
  data() {
    return {
      currentSwiperIndex: 0,
      bannerList: [
       {
           "bannerId": 1,
           "bannerUrl": "https://oss-goldfull-cc.oss-cn-shenzhen.aliyuncs.com/prod/banner/banner02.png",
           "linkUrl": "https://pre.goldfull.cc/static/banner/businessTime.html",
           "title": "关于各项业务的营业时间公告",
           "subtitle": "",
           "buttonText": "点击查看"
       }
      ],
      marketData: {
        GOLD: {
          category: '黄金',
          buyback: '--',
          sales: '--',
          high: '--',
          low: '--'
        },
        SILVER: {
          category: '白银',
          buyback: '--',
          sales: '--',
          high: '--',
          low: '--'
        },
        PLATINUM: {
          category: '铂金',
          buyback: '--',
          sales: '--',
          high: '--',
          low: '--'
        },
        PALLADIUM: {
          category: '钯金',
          buyback: '--',
          sales: '--',
          high: '--',
          low: '--'
        }
      },
      isLoggedIn: false,
      // 物料类型映射
      materialTypeMap: {
        'GOLD': '黄金',
        'SILVER': '白银',
        'PLATINUM': '铂金',
        'PALLADIUM': '钯金'
      },
      isBusinessStatus: '--'
    }
  },
  onUnload() {
    uni.$off('priceMessagesChanged');
  },
  onLoad() {
	this.getBanner();
    uni.$on('priceMessagesChanged', (newMsg) => {
      this.isBusinessStatus = newMsg.data.businessStatus === 'NO' ? '非营业' : '营业中';
      // 按照固定顺序：黄金 白银 铂金 钯金
      const orderKeys = ['GOLD', 'SILVER', 'PLATINUM', 'PALLADIUM'];
      this.marketData = orderKeys.map(item => {
        if (newMsg.data.priceMap[item]) {
          return {
            category: this.materialTypeMap[item],
            buyback: newMsg.data.priceMap[item].price,
            sales: newMsg.data.priceMap[item].sellPrice,
            high: newMsg.data.priceMap[item].maxPrice,
            low: newMsg.data.priceMap[item].minPrice,
            lastSellUp: newMsg.data.priceMap[item].lastSellUp,
            lastUp: newMsg.data.priceMap[item].lastUp
          }
        } else {
          // 如果没有数据，返回默认值
          return {
            category: this.materialTypeMap[item],
            buyback: '--',
            sales: '--',
            high: '--',
            low: '--',
            lastSellUp: '--',
            lastUp: '--'
          }
        }
      });
    });

  },
  onShow() { },
  methods: {
	getBanner(){
		  this.$http.get('/applet/common/banner').then(res => {
		  this.bannerList=res.data
		  })
	},
    getCurrentTime() {
      return this.$moment().format('YYYY.MM.DD HH:mm:ss');
    },
    // Banner点击事件
    handleBannerClick(item) {
      if (item.linkUrl) {
		  if(item.linkUrl.startsWith('http')){
			  uni.navigateTo({
			    url: '/pages/webview/webview?url=' + encodeURIComponent(item.linkUrl)
			  });
		  }
			else{
				uni.navigateTo({
				  url: item.linkUrl
				});
			}
      }
    },

    // 轮播切换事件
    onSwiperChange(e) {
      this.currentSwiperIndex = e.detail.current;
    },

    // 轮播动画完成事件
    onAnimationFinish(e) {
    },

    // 跳转到指定轮播项
    goToSwiper(index) {
      this.currentSwiperIndex = index;
      // 这里可以通过ref来控制swiper组件
    }
  }
}
</script>

<style scoped lang="scss">
@import '@/uni.scss';

.home-container {
  min-height: 100vh;
  background-color: #F5F5F6;
  padding: 0;
}

/* Banner轮播 */
.banner-swiper {
  width: 100%;
  height: 280rpx;
  position: relative;
}

.swiper {
  width: 100%;
  height: 100%;
}

.swiper-item {
  width: 100%;
  height: 100%;
  position: relative;
}

.banner-image {
  width: 100%;
  height: 100%;
  display: block;
}

.banner-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(26, 26, 26, 0.7) 0%, rgba(44, 44, 44, 0.5) 50%, rgba(26, 26, 26, 0.7) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.banner-content {
  text-align: center;
  color: #ffffff;
}

.banner-title {
  display: block;
  font-size: 42rpx;
  font-weight: bold;
  margin-bottom: 15rpx;
  text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.5);
}

.banner-subtitle {
  display: block;
  font-size: 36rpx;
  opacity: 0.9;
  margin-bottom: 30rpx;
  text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.5);
}

.banner-button {
  display: inline-block;
  background: linear-gradient(135deg, #d4af37 0%, #f4d03f 100%);
  padding: 10rpx 26rpx;
  border-radius: 60rpx;
  transition: all 0.3s ease;
}

.banner-button:active {
  transform: scale(0.95);
}

.button-text {
  font-size: 28rpx;
  color: #1a1a1a;
  font-weight: bold;
}

/* 自定义指示器 */
.custom-indicator {
  position: absolute;
  bottom: 20rpx;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 12rpx;
  z-index: 10;
}

.indicator-dot {
  width: 16rpx;
  height: 16rpx;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.4);
  transition: all 0.3s ease;
  cursor: pointer;
}

.indicator-dot.active {
  background-color: #d4af37;
  transform: scale(1.2);
}

/* 公告栏 */
.announcement-bar {
  background-color: #ffffff;
  border-bottom: 2rpx solid #EEEEEE;
  overflow: hidden;
}

.notice-content {
  display: flex;
  align-items: center;
  padding: 25rpx 30rpx;
  animation: scroll-left 20s linear infinite;
}

.speaker-icon {
  margin-right: 15rpx;
  font-size: 28rpx;
  color: #d4af37;
  flex-shrink: 0;
}

.announcement-icon {
  width: 32rpx;
  height: 32rpx;
  margin-right: 15rpx;
  flex-shrink: 0;
  display: block;
}

.announcement-text {
  font-size: 28rpx;
  color: $uni-text-color-orange;
  white-space: nowrap;
}

@keyframes scroll-left {
  0% {
    transform: translateX(100%);
  }

  100% {
    transform: translateX(-100%);
  }
}

/* 状态和时间 */
.status-section {
  display: flex;
  align-items: center;
  padding: 25rpx 30rpx;
  background-color: #ffffff;
  border-bottom: 2rpx solid #EEEEEE;
}

.business-status {
  color: $uni-text-color-orange;
  font-size: 28rpx;
  padding-right: 20rpx;
  border-right: 2rpx solid #f0f0f0;
  letter-spacing: 2rpx;
}

.datetime {
  color: #0B1F20;
  font-size: 28rpx;
  padding-left: 20rpx;
}

/* 价格表格 */
.price-table {
  overflow: hidden;
  background-color: #ffffff;
}

.table-header {
  display: flex;
}

.header-cell {
  flex: 1;
  text-align: center;
  padding: 25rpx 15rpx;
  font-size: 28rpx;
  color: #0B1F20;
}

.table-row {
  display: flex;
  align-items: center;
  padding: 25rpx 0;
}

.category-cell {
  flex: 1;
  text-align: center;
  font-size: 28rpx;
  color: #0B1F20;
}

.price-cell {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8rpx;
}

.arrow-up {
  color: $uni-text-color-red;
  font-size: 28rpx;
  font-weight: bold;
}

.price {
  font-size: 28rpx;
}

.price-up {
  color: $uni-text-color-red;
}

.price-down {
  color: $uni-text-color-green;
}

.high-low-cell {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.high {
  color: $uni-text-color-red;
  font-size: 28rpx;
}

.low {
  color: $uni-text-color-green;
  font-size: 28rpx;
}

.arrow-down {
  color: $uni-text-color-green;
  font-size: 28rpx;
}

.separator {
  color: #cccccc;
  font-size: 24rpx;
}

/* 温馨提示 */
.disclaimer {
  margin: 20rpx 26rpx;
  padding: 20rpx 30rpx;
  background-color: #fff7e6;
  border-radius: 16rpx;
  border-left: 6rpx solid $uni-text-color-orange;
}

.disclaimer-text {
  font-size: 24rpx;
  color: #666666;
  line-height: 1.6;
  text-align: justify;
  letter-spacing: 2rpx;
}

/* 响应式设计 */
@media screen and (max-width: 750rpx) {
  .home-container {
    padding-bottom: 120rpx;
  }

  .banner-swiper {
    height: 350rpx;
  }

  .banner-title {
    font-size: 38rpx;
  }

  .banner-subtitle {
    font-size: 32rpx;
  }
}


.nav-left{
  display: flex;
  align-items: center;
  justify-content: center;
  .logo-text{
    font-size: 24rpx;
    color: #d4af37;
    flex: 1;
  }
  .logo-icon{
    width: 80rpx;
    height: 80rpx;
  }
}

</style>
